 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .active{
            color: red;
        }
        .classes{
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 绑定属性
        <img v-bind:src="imgUrl">
        <a :href="href">百度一下</a> -->
        <!-- 绑定样式 -->
        <!-- 绑定普通的样式要使用下data里面的变量isActive，要看这个值是否是true -->
         <h2 class="active" :class="{classes:isActive}">hello world</h2>
         
    </div>
    <script src="../lib/Vue.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
               return {
                imgUrl:"https://img.shetu66.com/2023/04/25/1682405982916194.png",
                href:"www.baidu.com",
                isActive:true
               }
            },
            methods: {

            }
        });
        app.mount("#app");
    </script>
</body>

</html>